<template>
  <el-card class="sales-visited">
    <div class="sales-visited-header">
      <el-tabs v-model="salesVisitedTab">
        <el-tab-pane label="销售额" name="sales" />
        <el-tab-pane label="访问量" name="visited" />
      </el-tabs>

      <div class="sales-visited-wrap">
        <el-radio-group class="mr-10">
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="今年" />
        </el-radio-group>

        <el-date-picker
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          clearable
        />
      </div>
    </div>

    <SalesVisitedChart
      :data="data"
      :dataAxis="dataAxis"
      :salesVisitedTab="salesVisitedTab"
    />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SalesVisited",
};
</script>

<script lang="ts" setup>
import { ref, computed } from "vue";
import SalesVisitedChart from "./sales-visited-chart.vue";

const props = defineProps<{
  orderFullYearAxis: string[];
  orderFullYear: number[];
  userFullYearAxis: string[];
  userFullYear: number[];
}>();

const salesVisitedTab = ref("sales");

const data = computed(() => {
  return salesVisitedTab.value === "sales"
    ? props.orderFullYear
    : props.userFullYear;
});

const dataAxis = computed(() => {
  return salesVisitedTab.value === "sales"
    ? props.orderFullYearAxis
    : props.userFullYearAxis;
});
</script>

<style scoped lang="scss">
.sales-visited :deep() {
  .el-card__body {
    padding: 0 20px;
  }
  .el-tabs__item {
    height: 60px;
    line-height: 60px;
    width: 100px;
    text-align: center;
    padding: 0;
    &.is-active {
      background-color: #ecf5ff;
    }
  }
}

.sales-visited-header {
  position: relative;
}

.sales-visited-wrap {
  position: absolute;
  height: 60px;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
</style>
